<template>
  <div class="progress-container">
    <div class="progress-circle">
      <svg class="progress-ring" width="100" height="100">
        <circle class="progress-ring__background" stroke="#ddd" stroke-width="2" fill="transparent" r="20" cx="50" cy="50" />
        <circle class="progress-ring__circle" stroke="white" stroke-width="2" fill="transparent" r="20" cx="50" cy="50"
          :style="{ strokeDasharray: circumference, strokeDashoffset: strokeDashoffset }" />
      </svg>
      <div class="progress-content">
        <span class="progress-cancel" @click="handleCancel">X</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';

const props = defineProps({
  progress: {
    type: Number,
    default: 0,
    required: true
  },
  onCancel: {
    type: Function,
    required: false
  }
});

const radius = 46;
const circumference = 2 * Math.PI * radius;
const strokeDashoffset = computed(() => circumference - (props.progress / 100) * circumference);

const handleCancel = () => {
  if (props.onCancel) {
    props.onCancel();
  }
};
</script>

<style scoped>
.progress-container {
  position: relative;
  width: 100px;
  height: 100px;
}

.progress-circle {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.progress-ring {
  transform: rotate(-90deg);
}

.progress-ring__background {
  fill: #ddd;
  /* 背景填充颜色为红色 */
}

.progress-ring__circle {
  transition: stroke-dasharray 0.3s, stroke-dashoffset 0.3s;
}

.progress-content {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.progress-cancel {
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
}
</style>
